<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Button type="primary" size="large" long @click="formSettingModalVisible = !formSettingModalVisible">表单域配置</Button>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Collapse value="0">
          <Panel>
            表单整体显示规则配置
            <div slot="content">
              <Form :label-width="120">
                <FormItem label="表单域标签的宽度">
                  <InputNumber size="small" :max="1000" :min="1" v-model="formOption.form.labelWidth"></InputNumber>
                </FormItem>
                <FormItem label="表单域标签的位置">
                  <Select :transfer="true" size="small" v-model="formOption.form.labelPosition">
                    <Option value="right">右边</Option>
                    <Option value="left">左边</Option>
                  </Select>
                </FormItem>
                <FormItem label="表单域字体颜色">
                  <PnColorPicker size="small" v-model="formOption.style.formItemColor" alpha recommend/>
                </FormItem>
                <FormItem label="显示校验错误信息">
                  <i-switch v-model="formOption.form.showMessage">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
              </Form>
            </div>
          </Panel>
          <Panel>
            提交按钮配置
            <div slot="content">
              <Form :label-width="120">
                <FormItem label="显示">
                  <i-switch v-model="formOption.submitBtn.show">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItem label="按钮类型">
                  <Select :transfer="true" size="small" v-model="formOption.submitBtn.type">
                    <Option value="default">default</Option>
                    <Option value="primary">primary</Option>
                    <Option value="dashed">dashed</Option>
                    <Option value="text">text</Option>
                    <Option value="info">info</Option>
                    <Option value="success">success</Option>
                    <Option value="warning">warning</Option>
                    <Option value="error">error</Option>
                  </Select>
                </FormItem>
                <FormItem label="尺寸">
                  <Select :transfer="true" size="small" v-model="formOption.submitBtn.size">
                    <Option value="default">默认</Option>
                    <Option value="small">小型</Option>
                    <Option value="large">大型</Option>
                  </Select>
                </FormItem>
                <FormItem label="宽度100%">
                  <i-switch v-model="formOption.submitBtn.long">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItem label="图标">
                  <Input size="small" v-model="formOption.submitBtn.icon" placeholder=""/>
                </FormItem>
                <FormItem label="按钮文本">
                  <Input size="small" v-model="formOption.submitBtn.innerText" placeholder=""/>
                </FormItem>
              </Form>
            </div>
          </Panel>
          <Panel>
            重置按钮配置
            <div slot="content">
              <Form :label-width="120">
                <FormItem label="显示">
                  <i-switch v-model="formOption.resetBtn.show">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItem label="按钮类型">
                  <Select :transfer="true" size="small" v-model="formOption.resetBtn.type">
                    <Option value="default">default</Option>
                    <Option value="primary">primary</Option>
                    <Option value="dashed">dashed</Option>
                    <Option value="text">text</Option>
                    <Option value="info">info</Option>
                    <Option value="success">success</Option>
                    <Option value="warning">warning</Option>
                    <Option value="error">error</Option>
                  </Select>
                </FormItem>
                <FormItem label="尺寸">
                  <Select :transfer="true" size="small" v-model="formOption.resetBtn.size">
                    <Option value="default">默认</Option>
                    <Option value="small">小型</Option>
                    <Option value="large">大型</Option>
                  </Select>
                </FormItem>
                <FormItem label="宽度100%">
                  <i-switch v-model="formOption.resetBtn.long">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItem label="图标">
                  <Input size="small" v-model="formOption.resetBtn.icon" placeholder=""/>
                </FormItem>
                <FormItem label="按钮文本">
                  <Input size="small" v-model="formOption.resetBtn.innerText" placeholder=""/>
                </FormItem>
              </Form>
            </div>
          </Panel>

        </Collapse>

      </TabPane>

      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument :showOriginalProps="false"></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="自定义表单提交逻辑">
            <Alert style="padding: 5px;">
              此脚本中，使用_this指向当前组件vm实例
            </Alert>
            <CodeEditor v-model="submitCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

    <Drawer v-model="formSettingModalVisible"
            transfer
            width="100"
            title="表单域配置"
            :footer-hide="true" @on-cancel="formSettingModalCancelHandler">
      <div class="form-setting-modal-container">
        <div class="left-panel">
          <div class="control-item">隐藏域Hidden<span class="add-btn" @click.stop="addFormItem('hidden')"><Icon type="md-add" size="16"/></span></div>
          <div class="control-item">文本输入框Input<span class="add-btn" @click.stop="addFormItem('input')"><Icon type="md-add" size="16"/></span></div>
          <div class="control-item">开关Switch<span class="add-btn" @click.stop="addFormItem('switch')"><Icon type="md-add" size="16"/></span></div>
          <div class="control-item">多选框CheckBox<span class="add-btn" @click.stop="addFormItem('checkbox')"><Icon type="md-add" size="16"/></span></div>
          <div class="control-item">单选框Radio<span class="add-btn" @click.stop="addFormItem('radio')"><Icon type="md-add" size="16"/></span></div>
          <div class="control-item">选择器Select<span class="add-btn" @click.stop="addFormItem('select')"><Icon type="md-add" size="16"/></span></div>
          <div class="control-item">日期选择器DatePicker<span class="add-btn" @click.stop="addFormItem('DatePicker')"><Icon type="md-add" size="16"/></span></div>
          <div class="control-item">时间选择器TimePicker<span class="add-btn" @click.stop="addFormItem('TimePicker')"><Icon type="md-add" size="16"/></span></div>
          <div class="control-item">数字输入框InputNumber<span class="add-btn" @click.stop="addFormItem('InputNumber')"><Icon type="md-add" size="16"/></span></div>
          <div class="control-item">颜色选择器ColorPicker<span class="add-btn" @click.stop="addFormItem('ColorPicker')"><Icon type="md-add" size="16"/></span></div>
          <div class="control-item">评分器Rate<span class="add-btn" @click.stop="addFormItem('rate')"><Icon type="md-add" size="16"/></span></div>
          <div class="control-item">滑块Slider<span class="add-btn" @click.stop="addFormItem('slider')"><Icon type="md-add" size="16"/></span></div>
          <div class="control-item">按钮Button<span class="add-btn" @click.stop="addFormItem('button')"><Icon type="md-add" size="16"/></span></div>
        </div>
        <div class="center-panel" @click.stop="centerPanelClickHandler">
          <Row :gutter="10">
            <draggable
                :list="rule"
                class="form-item-list">
              <i-col :span="r.col.span" :offset="r.col.offset" v-for="(r, index) in rule" :key="index">
                <div
                    class="form-item-list-item"
                    :class="buildFormItemListItemActiveClass(r)"
                    @click.stop="formItemClickHandler(r)">
                  <span v-if="r.type == 'i-button'">{{r.children[0]}}</span>
                  <span v-else>{{r.title + '【' + r.field + '】'}}</span>
                  <span class="delete-btn" @click.stop="deleteFormItem(index)"><Icon type="md-trash" /></span>
                </div>
              </i-col>

            </draggable>
          </Row>
        </div>
        <div class="right-panel">
          <component :is="currentBuilderName" v-model="currentFormItem"></component>
          <p v-show="!currentBuilderName" class="panel-hint">配置区</p>
        </div>
        <div class="bottom-panel">
          <Button size="small" @click="clearRule">清空所有表单域</Button>
        </div>
      </div>
    </Drawer>

  </div>
</template>

<script>

  import draggable from "vuedraggable";

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'
  import CustomForm from './CustomForm'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'CustomFormForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    components: {
      draggable
    },
    mixins: [FuncCompFormMixin],
    data() {
      return {
        formSettingModalVisible: false,

        currentBuilderName: '',
        currentFormItem: null
      }
    },
    mounted() {

    },
    methods: {

      formSettingModalCancelHandler () {
        this.currentBuilderName = '';
        this.currentFormItem = null;
      },

      buildFormItemListItemActiveClass (r) {
        if (r && this.currentFormItem) {
          if (r.builderId == this.currentFormItem.builderId) {
            return 'active'
          }
        }
        return ''
      },

      addFormItem (type) {
        switch (type) {
          case 'hidden':
            this.rule.push(CustomForm.buildHiddenObj());
            break;
          case 'input':
            this.rule.push(CustomForm.buildInputObj());
            break;
          case 'switch':
            this.rule.push(CustomForm.buildSwitchObj());
            break;
          case 'checkbox':
            this.rule.push(CustomForm.buildCheckboxObj());
            break;
          case 'radio':
            this.rule.push(CustomForm.buildRadioObj());
            break;
          case 'select':
            this.rule.push(CustomForm.buildSelectObj());
            break;
          case 'DatePicker':
            this.rule.push(CustomForm.buildDatePickerObj());
            break;
          case 'TimePicker':
            this.rule.push(CustomForm.buildTimePickerObj());
            break;
          case 'InputNumber':
            this.rule.push(CustomForm.buildInputNumberObj());
            break;
          case 'ColorPicker':
            this.rule.push(CustomForm.buildColorPickerObj());
            break;
          case 'rate':
            this.rule.push(CustomForm.buildRateObj());
            break;
          case 'slider':
            this.rule.push(CustomForm.buildSliderObj());
            break;
          case 'button':
            this.rule.push(CustomForm.buildButtonObj());
            break;
        }
      },

      deleteFormItem (index) {
        this.$Modal.confirm({
          title: '提醒',
          content: '确认删除此表单域吗？',
          onOk: () => {
            this.rule.splice(index, 1)
          }
        });
      },

      formItemClickHandler (r) {
        this.currentBuilderName = r.builderName;
        this.currentFormItem = r;
      },

      centerPanelClickHandler () {
        this.currentBuilderName = '';
        this.currentFormItem = null;
      },

      clearRule () {
        this.$Modal.confirm({
          title: '提醒',
          content: '确认清空所有表单域吗？',
          onOk: () => {
            this.rule = [];
          }
        });
      }
    },
    computed: {
      ...mapFields({

        formOption: 'component.compConfigData.formOption',
        rule: 'component.compConfigData.rule',

        submitCode: 'component.compConfigData.submitCode'

      })
    }
  }
</script>

<style lang="less" scoped>
  .form-setting-modal-container {
    width: 100%;
    height: 100%;
    border: 1px solid #757575;
    position: relative;
    .left-panel {
      width: 200px;
      height: calc(100% - 50px);
      float: left;
      border-right: 1px solid #757575;
      padding: 10px;
      overflow-y: auto;
      .control-item {
        width: 100%;
        height: auto;
        border-radius: 4px;
        background-color: #2196f3;
        border: 2px solid #64b5f6;
        padding: 8px;
        margin-bottom: 10px;
        color: #fff;
        .add-btn {
          float: right;
          cursor: pointer;
        }
      }
    }
    .center-panel {
      width: calc(100% - 550px);
      height: calc(100% - 50px);
      float: left;
      padding: 10px;
      overflow-y: auto;
      //background-color: #f5f5f5;
    }
    .right-panel {
      position: relative;
      width: 350px;
      height: calc(100% - 50px);
      float: left;
      border-left: 1px solid #757575;
      /*padding: 10px;*/
      overflow-y: auto;
    }
    .bottom-panel {
      width: 100%;
      height: 50px;
      border-top: 1px solid #757575;
      position: absolute;
      bottom: 0px;
      line-height: 46px;
      padding: 0px 15px 0px 15px;
    }
  }

  .panel-hint {
    position: absolute;
    font-size: 1.5em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity:0.5;
    color: #fafafa;
  }

  .form-item-list {
    .form-item-list-item {
      position: relative;
      width: 100%;
      height: auto;
      background-color: #757575;
      border: 2px solid #757575;
      color: #fff;
      border-radius: 4px;
      padding: 8px;
      cursor: move;
      margin-bottom: 10px;
      .delete-btn {
        float: right;
        cursor: pointer;
      }
      &.active {
        border: 2px solid #ff9800;
      }
    }
  }

</style>
